<template>
    <div class="navHeader">
        <h1 class="title"></h1>
        <el-row class="wrap">
            <el-col :span="6">
            </el-col>
            <el-col :span="12">
                <el-row class="infoBox">
                    <el-col :span="6" class="infoItem" v-for="item,index in datas" :key="index">
                        <div>
                            <span class="key">{{item.key}}:</span>
                            <span class="val">{{item.val}}</span>
                            <span class="unit">{{item.unit}}</span>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6">
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { store } from "@/store/config.js"
import emitter from "@/mitt/index.js";
import {router} from "@/router/index.js";
import {ref} from "vue";


let datas = ref([
    {
        key:"运行状态",val:"正常",unit:"",
    },
    {
        key:"风速",val:"11.2",unit:"s/h",
    },
    {
        key:"速压",val:"11.2",unit:"s/h",
    },
    {
        key:"电机转速",val:"11.2",unit:"s/h",
    },
    {
        key:"电机振动",val:"11.2",unit:"s/h",
    },
    {
        key:"室温",val:"11.2",unit:"s/h",
    },
    {
        key:"洞门状态",val:"11.2",unit:"s/h",
    },
    {
        key:"温度",val:"11.2",unit:"s/h",
    },
    {
        key:"大气压",val:"11.2",unit:"s/h",
    },
    {
        key:"年度试验项数",val:"11.2",unit:"s/h",
    },
    {
        key:"年度试验条数",val:"11.2",unit:"s/h",
    },

])



</script>
<style lang="less" scoped>
.navHeader{
    width: 100vw;
    height: 135px;
    background-size: 100% 100%;
    color: #2ee6e2;
    position: absolute;
    letter-spacing: 2px;
    background-image: url('/images/header_bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    .infoBox{
        padding: 20px;
        background-color: #0e18237a;
        border-radius: 4px;
    }
    .title{
        text-align: center;
        margin: 10px 0px 0px;
        font-size: 2.5rem;
    }
    .wrap{
        margin-top: 6%;
    }
    .key{
        font-size: clamp(10px,3vw,42px)!important;
        color: #b3b3be;
    }
    .unit{
        font-size: clamp(10px,3vw,42px)!important;
    }
    .val{
        font-size: clamp(10px,3vw,42px)!important;
    }

}



</style>